<template>
    <div>
        <p v-for="(user,index) in users" :key="user.id">{{user.name}} - {{user.age}}</p>
        <p>请输入名字:</p>
        <input type="text" v-model="name">  </input>
        <br></br>
        <p>请输入年龄:</p>
        <input type="text"  v-model="age">  </input>
        <br></br>
        <button @click="addUser">添加</button>
    </div>
</template>

<script>
export default {
    data () {
        return {
            users: [
                {name: 'John', age: 25,id:0},
                {name: 'Jane', age: 30,id:1},
                {name: 'Bob', age: 35,id:2}
            ],
            age:0,
            name:""
        }
    },
    methods: {
        addUser(){
            this.users.push({name:this.name,age:this.age,id:this.users.length})
            this.name = ""
            this.age = 0
        }
    }

}
</script>


<style sccoped>
</style>